<template>
  <div class="course-time-item">
      <div class="course-content">
          <div class="course-name">{{name}}</div>
      </div>
      <div class="course-appoint" slot="footer">
          <van-button @click="appoint" class="course-button" size="mini">预约</van-button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'course-person-item',
  comments: 'course-person-item',
  props: {
    id: Number,
    name: String,
    disabled: Boolean
  },
  data () {
    return {
    }
  },
  watch: {
  },
  methods: {
    appoint: function (e) {
      debugger
      if (this.disabled) {
        this.$toast('还未购买课程，请先购买！')
        return
      }
      this.$router.push({
        name: 'appointment_detail',
        query: {
          time_id: this.id,
          name: this.name,
          course_id: this.$router.currentRoute.params.course_id
        }
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.course-time-item{
    height: 50px;
    width: 100%;
    background-color: #333;
}
.course-img{
    height: 80px;
    width: 80px;
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repea;
    background-size: 100%;
    left: 5px;
    top: 10%;
}
.course-content{
    height: 50px;
    line-height: 50px;
    width: 70%;
    color: #f8f8f8;
    float: left;
}
.course-name{
    font-size: 1rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.course-desc{
    font-size: 0.8rem;
    text-align: left;
    margin-top: 8px;
    overflow:hidden;
    //height: 2.4rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    //display: -webkit-box;
    //-webkit-box-orient: vertical;
    //-webkit-line-clamp: 2;
}
.course-detail{
    display: block;
    font-size: 0.8rem;
}
.course-time{
    color:yellow;
}
.course-appoint{
    color: yellow;
    height: 50px;
    line-height: 50px;
    width: 30%;
    float: right;
}
.camp{
    width: 0;
    height: 0;
    border-top: 30px solid yellow;
    border-left: 30px solid transparent;
    position: absolute;
    right: 0px;
}
.camp span{
    position: absolute;
    top: -30px;
    left: -15px;
    font-size: 0.8rem;
    transform: rotate(44deg);
}
.course-button{
    color: #fff;
    background-color: #333;
    border: 1px solid yellow;
}
.course_button_disable{
    color: #fff;
    background-color: #666;
    border: 1px solid #f8f8f8;
}
</style>
